<head>
<style>

.tabs > li {
    vertical-align: middle !important;;
}

.tool_label:hover {
	border-color: rgba(0, 0, 0, 0) !important;;
	background-color: unset !important;;
	color: unset !important;;
	cursor: unset !important;;
}

.tool_label::after {
	border-color: rgba(0, 0, 0, 0) !important;;
	background-color: unset !important;;
	color: unset !important;;
	cursor: unset !important;;
	content: unset !important;;
}

.tool_label_span {
  display: inline-block;
  white-space: nowrap;
}

.tool_label_select {
	width: auto;
}
</style>
</head>

<li id="tool_label" class="tool_label">
	<span class="tool_label_span">
	&nbsp;&nbsp;<%:Current Config File%>:&nbsp;
	<select class="tool_label_select" id="cfg_name">
	</select>&nbsp;&nbsp;
	<input type="button" class="btn cbi-button cbi-button-apply" value="<%:SwiTch%>" onclick="return switch_config(this)" />
	&nbsp;
	</span>
</li>

<script type="text/javascript">//<![CDATA[

		var config_name = document.getElementById('cfg_name');
		var tool_label = document.getElementById('tool_label');
		var Commit = document.getElementById('cbi-table-1-Commit');
		var Apply = document.getElementById('cbi-table-1-Apply');
		var Back = document.getElementById('cbi-table-1-Back');
		var Load_Config = document.getElementById('cbi-table-1-Load_Config');
		var Delete_Unused_Servers = document.getElementById('cbi-table-1-Delete_Unused_Servers');
		var Delete_Servers = document.getElementById('cbi-table-1-Delete_Servers');
		var Delete_Proxy_Provider = document.getElementById('cbi-table-1-Delete_Proxy_Provider');
		var Delete_Groups = document.getElementById('cbi-table-1-Delete_Groups');
		var rule_mg = document.getElementById('cbi-table-1-rule_mg');
		var pro_mg = document.getElementById('cbi-table-1-pro_mg');
    
		setTimeout("get_header()",100);
		
		if (Commit) {
			Commit.style.textAlign="center";
		}
		if (Apply) {
			Apply.style.textAlign="center";
		}
		if (Back) {
			Back.style.textAlign="center";
		}
		if (Load_Config) {
			Load_Config.style.textAlign="center";
			Delete_Unused_Servers.style.textAlign="center";
			Delete_Servers.style.textAlign="center";
			Delete_Proxy_Provider.style.textAlign="center";
			Delete_Groups.style.textAlign="center";
		}
		if (rule_mg) {
    		rule_mg.style.textAlign="center";
    		pro_mg.style.textAlign="center";
		}

		if (tool_label.style.display != "none") {
			XHR.get('<%=luci.dispatcher.build_url("admin", "vpn", "openclash", "config_name")%>', null, function(x, status) {
				if (x && x.status == 200 && status.config_name != "") {
					for(var i in status.config_name){
     	 	  			config_name.options.add(new Option(status.config_name[i].name,status.config_name[i].name));
    				}
    				if (status.config_path != "") {
    					config_name.value = status.config_path;
    				}
    			else
    			{
    				config_name.options.add(new Option("<%:Not Select%>",""));
    				config_name.value = "";
    			}
				}
				else if (x && x.status == 200 && status.config_path != "") {
					config_name.options.add(new Option(status.config_path,status.config_path));
					config_name.value = status.config_path;
				}
				else {
					tool_label.style.display = "none";
				}
			});
		};
	
	function get_header() {
		var header = document.getElementsByClassName("tabmenu-item-log ")[0];
		if (header) {
			insertAfter(tool_label,header);
		}
		else {
			setTimeout("get_header()",100);
		}
	}
		
	function insertAfter(newElement, targetElement) {
		var parent = targetElement.parentNode;
		if (parent.lastChild == targetElement) {
			parent.appendChild(newElement, targetElement); 
		}
		else {
			parent.insertBefore(newElement, targetElement.nextSibling);
		};
	};
	
	function switch_config(btn)
	{
		if (config_name.value && config_name.value != "") {
			btn.disabled = true;
			XHR.get('<%=luci.dispatcher.build_url("admin", "vpn", "openclash", "switch_config")%>', {config_name: config_name.value}, function(x, status) {
				if (x && x.status == 200) {
					btn.disabled = false;
					alert(' <%:Config File%>: ' + config_name.value + ' <%:switching succeeded!%>')
					window.location.href=location.pathname;
				}
				else {
					alert(' <%:Config File%>: ' + config_name.value + ' <%:switching failed!%>')
				}
			});
			return false;
		}
	}

	function restore_config(btn)
    {
        btn.value    = '<%:Restore Default Config%>';
        btn.disabled = true;
        var r = confirm("<%:Are you sure want to restore the default config?%>")
        if (r == true) {
        XHR.get('<%=luci.dispatcher.build_url("admin", "vpn", "openclash", "restore")%>', null, function(x, status) {
        	if ( x && x.status == 200 ) {
        		alert('<%:Restore succeeded!%>')
        		window.location.href='<%="settings"%>';
        	}
        	else {
				alert('<%:Restore failed!%>')
				window.location.href='<%="settings"%>';
           }
        });
        }
        btn.disabled = false;
        return false; 
    }
	
	function winOpen(url)
	{
		var winOpen = window.open(url);
		if(winOpen == null || typeof(winOpen) == 'undefined'){
			window.location.href=url;
		}
	}
//]]></script>